/***************************************************************************/
/*                     TimeTrack Client (Canvas Drawing)                   */
/*                         (c) Juan Casares 2006                           */
/***************************************************************************/

function tkctrlDrawClock(canvas, seconds, paused, active, inworksite) {

	if (!canvas.getContext) return;

	var size = canvas.width;
	
	/** get background color */
	var backgroundColor = "";
	var backgroundElement = canvas;
	do {
		if (backgroundElement == null) {
			backgroundColor = "rgb(200,200,200)";
			break;
		}
		backgroundColor = document.defaultView.getComputedStyle(backgroundElement,"").backgroundColor;
		backgroundElement = backgroundElement.parentNode;
	}
	while (backgroundColor == "transparent");

	canvas = canvas.getContext("2d");
	
	var clockEdgeLight, clockEdgeDark, faceLight, faceDark;
	
	if (inworksite) {
		clockEdgeLight = "rgb(81,81, 255)";
		clockEdgeDark = "rgb(0,0,204)";
		faceLight = "rgb(255,255,255)";
		faceDark = "rgb(200,200,220)";
	}
	else if (active) {
		clockEdgeLight = "rgb(255,81,81)";
		clockEdgeDark = "rgb(204,0,0)";
		faceLight = "rgb(255,255,255)";
		faceDark = "rgb(200,200,220)";
	}
	else {
		clockEdgeLight = "rgb(160,160,160)";
		clockEdgeDark = "rgb(140,140,140)";
		faceLight = "rgb(220,220,220)";
		faceDark = "rgb(185,185,185)";
	}
	
	var handColor = "rgba(30,30,30,0.5)";
	
	var center = size/2;
	
	/* draw background circle */
	canvas.fillStyle = backgroundColor;
	canvas.beginPath();
	canvas.arc (center, center, size/2-0.5, 0 * Math.PI, 2 * Math.PI, true);
	canvas.fill();
	
	/* draw edge */
	var clockEdgeGradient = canvas.createRadialGradient(center,center,size/2,center-2,center-2,size/2-3);
	clockEdgeGradient.addColorStop(0, clockEdgeDark);
	clockEdgeGradient.addColorStop(1, clockEdgeLight);
	
	canvas.fillStyle = clockEdgeGradient;
	canvas.beginPath();
	canvas.arc (center, center, center-1, 0 * Math.PI, 2 * Math.PI, true);
	canvas.fill();
	
	/* draw face */ 
	var faceGradient = canvas.createRadialGradient(center+4,center+4,size/2-4,center,center,size/2+1);
	faceGradient.addColorStop(0, faceDark);
	faceGradient.addColorStop(0.5, faceLight);
			
	canvas.fillStyle = faceGradient;
	canvas.beginPath();
	canvas.arc (center, center, center-3, 0 * Math.PI, 2 * Math.PI, true);
	canvas.fill();
	
	/* draw hand */
	const secondsInFullTurn = 30;
	seconds = (seconds + secondsInFullTurn/2) % secondsInFullTurn;
	canvas.save();
	canvas.translate (center, center);
	canvas.rotate (seconds / secondsInFullTurn * 2 * Math.PI);
	canvas.strokeStyle = handColor;
	canvas.linewidth = 1.5;
	
	canvas.beginPath();
	canvas.moveTo (0.8, -2.0);
	canvas.lineTo (0, size/2-6);
	canvas.lineTo (-0.8, -2.0);
	canvas.stroke();
	canvas.restore();
	
	/* draw pause */
	if (paused) {
		var pauseBorder = "rgb(0,0,50)";
		var pauseBackground = "rgb(255, 233, 16)";
		canvas.save();
		canvas.translate (center, center);
		canvas.fillStyle = pauseBackground;
		canvas.strokeStyle = pauseBorder;
		canvas.lineWidth = 0.25;
		const pauseHeight = size*0.5;
		const pauseWidth = size * 0.2;
		const halfGap = 0.75;
		canvas.fillRect (-pauseWidth-halfGap, -pauseHeight*0.5, pauseWidth, pauseHeight);
		canvas.fillRect ( halfGap, -pauseHeight*0.5, pauseWidth, pauseHeight);
		
		canvas.strokeRect (-pauseWidth-halfGap, -pauseHeight*0.5, pauseWidth, pauseHeight);
		canvas.strokeRect ( halfGap, -pauseHeight*0.5, pauseWidth, pauseHeight);
		canvas.restore();
	}
}
